<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <title>操作日志</title>
    <link media="all" rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script charset="utf-8" th:src="@{/layui/layui.js}"></script>
    <style>
        body {
            margin: 10px;
            /* 去掉不必要的 text-align: center */
        }
        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
        /* 调整日期范围选择器的样式 */
        .layui-input-inline {
            width: 150px;
        }

        /* 定义表格父容器的样式，使其成为弹性布局容器，并将子元素居中 */
        .table-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 60px; /* 可根据需要调整表格与上方搜索框的间距 */
        }

        .table-container-search{
            margin-right: 20px; /* 可根据需要调整搜索框与表格的间距 */
            margin-left: 20px;
            padding-top: 15px;
            margin-bottom: -20px;
        }

        /* 调整表格工具栏样式，使其内部元素左对齐 */
        .layui-table-tool {
            display: flex;
            justify-content: flex-start;
        }

        /* 确保表格宽度固定，避免因内容变化导致布局混乱 */
        #logTable {
            width: 1100px;
        }

        /* 定义不同操作类型徽章的样式 */
        .badge {
            display: inline-block;
            padding: 0.25em 0.4em;
            font-size: 100%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.5rem;
        }

        .badge-add {
            color: #fff;
            background-color: #83a728;
        }

        .badge-update {
            color: #fff;
            background-color: #7300ff;
        }

        .badge-AddOrUpdate {
            color: #fff;
            background-color: #007bff;
        }

        .badge-delete {
            color: #fff;
            background-color: #dc3545;
        }

        .badge-batch-delete {
            color: #fff;
            background-color: #ffc107;
        }

        .badge-login {
            color: #fff;
            background-color: #00ff32;
        }

        .badge-register {
            color: #fff;
            background-color: #ff6607;
        }

        .badge-input {
            color: #fff;
            background-color: #ff6607;
        }

        .badge-output {
            color: #fff;
            background-color: #ff6607;
        }
    </style>
</head>
<body class="childrenBody">

<div class="table-container-search">
    <!--查询条件-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
        <legend>搜索条件</legend>
    </fieldset>
    <form action="" class="layui-form" id="searchFrm" lay-filter="searchFrm" method="post">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-inline" id="test6">
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" id="test-startDate-1" name="startTime" placeholder="开始日期"
                               type="text">
                    </div>
                    <div class="layui-form-mid">至</div>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" id="test-endDate-1" name="endTime" placeholder="结束日期"
                               type="text">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="operateMenu" lay-verify="">
                        <option value="">操作菜单</option>
                        <option value="中国人口数据管理">中国人口数据管理</option>
                        <option value="人口相关新闻管理">人口相关新闻管理</option>
                        <option value="上下班打卡记录管理">上下班打卡记录管理</option>
                        <option value="菜单管理">菜单管理</option>
                        <option value="角色管理">角色管理</option>
                        <option value="用户管理">用户管理</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input class="layui-input input-radius" name="operator" placeholder="操作人"
                           type="text">
                </div>
            </div>
            <div class="layui-inline">
                <select name="operateType" lay-verify="">
                    <option value="">操作类型</option>
                    <option value="新增">新增</option>
                    <option value="修改">修改</option>
                    <option value="更新">更新</option>
                    <option value="删除">删除</option>
                    <option value="批量删除">批量删除</option>
                    <option value="登录">登录</option>
                    <option value="注册">注册</option>
                    <option value="导入">导入</option>
                    <option value="导出">导出</option>
                </select>
            </div>
            <div class="layui-inline" style="text-align: center;padding-right: 15%;">
                <button class="layui-btn layui-btn-sm layui-btn-radius" lay-filter="doSearch" lay-submit=""
                        type="button"><i
                        class="layui-icon layui-icon-search layui-icon-normal"></i>查询
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm" type="reset"><i
                        class="layui-icon layui-icon-refresh"></i><span>重置</span>
                </button>
            </div>
        </div>
    </form>
</div>

<div class="table-container">
    <table class="layui-hide" id="logTable" lay-filter="test"></table>
</div>

<!--删除按钮javascript模块-->
<script id="barDemo" type="text/html">
    <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i
            class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>

<!-- 定义自定义模板 -->
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-icon layui-icon-delete" lay-event="batchDelete">批量删除</button>
    </div>
</script>

<script>
    layui.config({
        version: '1632428048355' //为了更新 js 缓存，可忽略
    });

    var tableIns;
    var mainIndex;

    //加载模块
    layui.use(['jquery', 'laydate', 'laypage', 'form', 'layer', 'table', 'util'], function () {
        var layer = layui.layer //弹层
            , $ = layui.jquery
            , laypage = layui.laypage //分页
            , laydate = layui.laydate //日期
            , table = layui.table //表格
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块
            , dropdown = layui.dropdown //下拉菜单
            , form = layui.form //表单
            , util = layui.util //时间格式工具


        //日期范围
        laydate.render({
            elem: '#test6'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            , type: 'datetime'
            , range: ['#test-startDate-1', '#test-endDate-1']
        });

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        tableIns = table.render({
            elem: '#logTable'
            , width: 1600
            , height: "full-300"
            , url: '/logs/selectAll' //数据接口
            , title: '操作日志表'
            , page: true //开启分页
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: false //开启合计行
            , cols: [ [
                {type: 'checkbox', fixed: 'left'},
                {field: 'operateTime', width: 240, align: "center", title: '操作时间', templet:function (d){
                    // 使用 layui.util.toDateString 进行日期格式化
                    return d.operateTime != null? util.toDateString(new Date(d.operateTime), 'yyyy-MM-dd HH:mm:ss')
                        :'<span class="layui-badge layui-bg-cyan">未知时间</span>'}
                },
                {field: 'operateMenu', width: 200, align: "center", title: '操作菜单'},
                {field: 'ip', width: 150, align: "center", title: '操作人ip'},
                {field: 'operator', width: 150, align: "center", title: '操作人'},
                { field: 'operateType', width: 120, align: "center", title: '操作类型', templet: function (d) {
                        var badgeClass = '';
                        switch (d.operateType) {
                            case '新增':
                                badgeClass = 'badge-add';
                                break;
                            case '修改':
                                badgeClass = 'badge-update'
                                break;
                            case '更新':
                                badgeClass = 'badge-AddOrUpdate';
                                break;
                            case '删除':
                                badgeClass = 'badge-delete';
                                break;
                            case '批量删除':
                                badgeClass = 'badge-batch-delete';
                                break;
                            case '登录':
                                badgeClass = 'badge-login'
                                break;
                            case '注册':
                                badgeClass = 'badge-register'
                                break;
                            case '导入':
                                badgeClass = 'badge-input'
                                break;
                            case '导出':
                                badgeClass = 'badge-output'
                                break;
                        }
                        return '<span class="badge ' + badgeClass + '">' + d.operateType + '</span>';
                    }
                },
                {field: 'operateDetail', align: "center", title: '操作详情'},
                {fixed: 'right', width: 100, align:'center', toolbar: '#barDemo', title: '操作'}
            ] ]
            , response: {
                statusCode: 0 // 定义成功的状态码
            }
        });

        //删除  监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event;
            if (layEvent === 'delete'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    //向服务端发送删除指令
                    $.post("/logs/delete/"+data.id,function (res) {
                        if (res.code === 200) {
                            layer.msg('删除操作日志成功!', { icon: 1 });
                            tableIns.reload(); // 刷新表格
                        } else {
                            layer.msg('删除操作日志失败：' + res.msg, { icon: 5 });
                        }
                    })
                    layer.close(index);
                })
            }
        })


        // 监听头工具栏事件 批量删除
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'batchDelete':
                    if (data.length === 0) {
                        layer.msg('请至少选择一行');
                    } else {
                        layer.confirm('真的要删除选中的 ' + data.length + ' 条数据吗？', {
                            btn: ['删除', '取消']
                        }, function (index) {
                            // 发送批量删除请求
                            $.ajax({
                                url: '/logs/delete/batch',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify(data.map(item => item.id)),
                                success: function (res) {
                                    if (res.code === 200) {
                                        layer.msg('批量删除操作日志成功', { icon: 1 });
                                        tableIns.reload(); // 刷新表格
                                    } else {
                                        layer.msg('批量删除操作日志失败：' + res.msg, { icon: 5 });
                                    }
                                },
                                error: function (xhr, status, error) {
                                    layer.msg('网络请求失败，请重试', { icon: 5 });
                                }
                            });
                        });
                    }
                    break;
            }
        });

        // 模糊查询
        form.on("submit(doSearch)", function (data) {
            var startDate = $('#test-startDate-1').val()
                ,endDate = $('#test-endDate-1').val();
            data.field.startDate = startDate;
            data.field.endDate = endDate;
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        })

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 1000 //数据总数
            , limit: 10 //每页显示的数据条数
            , skin: '#1E9FFF' //自定义选中色值
            //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });
    });
</script>
</body>
</html>